<template>
  <div class="home">
    <banner :list="list.bannerList"></banner>
    <exclusive-selection :list="list.exclusiveZone"></exclusive-selection>
    <rankings :list="list.rankingList"></rankings>
    <genres :list="list.category"></genres>
    <favorite></favorite>
    <span v-if="btnFlag" class="go-top" @click="backTop">
      <svg-icon icon-class="backTop"></svg-icon>
    </span>
  </div>
</template>

<script>
import Banner from "components/home/banner/Index";
import ExclusiveSelection from "components/home/exclusiveSelection/Index";
import Rankings from "components/home/rankings/Index";
import Genres from "components/home/genres/Index";
import Favorite from "components/home/favorite/Index";
export default {
  data() {
    return {
      list: {},
      loading: true,
      scrollTop: 0,
      btnFlag: false,
    };
  },
  components: {
    Banner,
    ExclusiveSelection,
    Rankings,
    Genres,
    Favorite,
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
    this.getInfo();
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    // 获取应用信息
    async getInfo() {
      // this.loading = true;
      try {
        let res = await this.$api.home.info({});
        // console.log(res);
        if (res.code === 1) {
          this.list = res.source;
          // this.loading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    backTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 50);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.scrollTop = scrollTop;
      if (this.scrollTop > 60) {
        this.btnFlag = true;
      } else {
        this.btnFlag = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .go-top {
    .svg-icon {
      width: 44px;
      height: 44px;
      cursor: pointer;
      position: fixed;
      bottom: 280px;
      right: 304px;
    }
  }
}
</style>
